var socket;
window.onload = function(){
    // bind function
    $(window).resize(function() {
        resizeWindow();
    });
    $("#input-content").keyup(function(event){
        if(event.keyCode == 13){
            send();
        }
    });
    // get config
    var name = document.getElementById("name").value;
    var port = document.getElementById("port").value;
    var webSocketUrl = "ws://localhost:" + port + "/ws/" + name;
    // resize window
    resizeWindow();
    // get connection
    if (!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
    }
    if (window.WebSocket) {
        socket = new WebSocket(webSocketUrl);
        socket.onmessage = function(event) {
            var data = JSON.parse(event.data);
            var type = data.type;
            var content = data.content;
            var time = getTime();
            if(type == null || type == ""){
                console.log("error message / " + event.data);
            }
            else if(type == "MEMBER_JOIN"){
                document.getElementById("history").innerHTML += "<div class='inform'>" + content.from + " join " + time + "</div>";
            }
            else if(type == "MEMBER_LEAVE"){
                document.getElementById("history").innerHTML += "<div class='inform'>" + content.from + " leave " + time + "</div>";
            }
            else if(type == "MESSAGE_OWN"){
                document.getElementById("history").innerHTML += "<div class='own'><div class='msg-title'>" + name + " " + time + ":</div><div class='msg-content'>" + content.body + "</div></div>";
            }
            else if(type == "MESSAGE_OTHERS"){
                document.getElementById("history").innerHTML += "<div class='other'><div class='msg-title'>" + content.from + " " + time + ":</div><div class='msg-content'>" + content.body + "</div></div>";
            }
            else if(type == "UNREPEATED_NAME"){
                name = content.body;
            }
            else if(type == "INFORM"){
                document.getElementById("history").innerHTML += "<div class='inform'>" + content.body + "</div>";
            }
            scrollToBottom();
        };
        socket.onopen = function(event) {
            console.log("client connected to server");
        };
        socket.onclose = function(event) {
            console.log("client closed.");
        };
    }
    else {
        alert("browser can not use WebSocket");
    }
};



function send() {
    if (!window.WebSocket) {
        return;
    }
    if (socket.readyState == WebSocket.OPEN) {
        var message = document.getElementById("input-content").value;
        document.getElementById("input-content").value = "";
        socket.send(message);
    } else {
        alert("connection have not start up yet.");
    }
}

function clearHistory() {
    document.getElementById("history").innerHTML = "";
}

function getTime() {
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    if(Number(hour) < 10){
        hour = "0" + hour;
    }
    if(Number(minute) < 10){
        minute = "0" + minute;
    }
    if(Number(second) < 10){
        second = "0" + second;
    }
    return hour + ":" + minute + ":" + second;
}

function resizeWindow(){
    var height = $(window).height() - $(".page-title").height() - $(".message-bar").height() - 50;
    $("#history").height(height);
    scrollToBottom();
}

function scrollToBottom(){
    $("#history").scrollTop($("#history").height());
}